<template>
    <div id="grand" class="align-center">
        <top-header ref="header"></top-header>
        <div class="grand-container" @click.capture="closeMessagecenter">
            <!-- <img src="../assets/img/home/home-bg.png" alt="" class="bg-img"> -->
            <!-- 头部公用 -->
            <div class="main-content">
                <template v-if="(!$route.fullPath.includes('person'))" >
                    <div class="nav-tools">
                        <div class="download-tips flex-center pointer active-dt" @click="showDowmMessage">
                            <img class="nav-bottom" src="../assets/img/home/tools-w.png" alt="">
                            <img class="nav-top" src="../assets/img/home/teaching_tools.png" alt="">

                            <!-- <span class="s-12 download-num">{{downloadSum}}</span> -->
                        </div>
                        <div class="sector align-start expanded" ref="toolsContainer">
                            <div class="tools-item flex-center"
                                @click="$electron.ipcRenderer.send('showResourceHideWindow', { metaId: 'Picture', userId: '', lessonId:''})">
                                <img class="pop-img"  src="../assets/img/home/image_trans.png" alt="">
                                <span class="pop-i-i-name">手机传图</span>
                            </div>
                            <div class="tools-item flex-center"
                                @click="$electron.ipcRenderer.send('showResourceHideWindow', { metaId: 'countDown', userId: '', lessonId:''})">
                                <img class="pop-img" src="../assets/img/home/inter_cutdown.png" alt="">
                                <span class="pop-i-i-name">活动计时</span>
                            </div>
                            <div class="tools-item flex-center"
                                @click="$electron.ipcRenderer.send('showResourceHideWindow', { metaId: 'extractNumber', userId: '', lessonId:''})">
                                <img class="pop-img"  src="../assets/img/home/inter_random.png" alt="">
                                <span class="pop-i-i-name">随机点名</span>
                            </div>
                            <div class="tools-item  flex-center"
                                @click="$electron.ipcRenderer.send('showResourceHideWindow', { metaId: 'charts', userId: '', lessonId:''})">
                                <img class="pop-img"  src="../assets/img/home/charts.png" alt="">
                                <span class="i-i-name">统计图表</span>
                            </div>
                            <div class="tools-item  flex-center"
                                @click="$electron.ipcRenderer.send('showResourceHideWindow', { metaId: 'mindMap', userId: '', lessonId:''})">
                                <img class="pop-img"  src="../assets/img/home/mindmap.png" alt="">
                                <span class="i-i-name">思维导图</span>
                            </div>
                            <div class="tools-item  flex-center"
                                @click="$electron.ipcRenderer.send('showResourceHideWindow', { metaId: 'tProgress', userId:'', lessonId:'',bookId:''})">
                                <img class="pop-img"  src="../assets/img/home/teaching_progress.png" alt="">
                                <span class="i-i-name">授课进度</span>
                            </div>
                            <div class="tools-item flex-center"
                                @click="$electron.ipcRenderer.send('showResourceHideWindow', { metaId: 'recognize', userId: '', lessonId:''})">
                                <img  class="pop-img"  src="../assets/img/home/recognize_icon.png" alt="">
                                <span  class="pop-i-i-name" >科普识图</span>
                            </div>
                            <div class="tools-item" style="position:relative">
                                <div class=" flex-center" @click="showDown=true">
                                    <img class="pop-img"  src="../assets/img/home/downloading_center.png" alt="">
                                    <span class="i-i-name">下载中心</span>
                                </div>
                                <span class="s-12 download-num">{{downloadSum}}</span>
                            </div>
                        </div>
                    </div>

                </template>
                <keep-alive>
                    <router-view v-if="$route.meta.keepAlive"></router-view>
                </keep-alive>
                <router-view v-if="!$route.meta.keepAlive"></router-view>
                <div v-if="showDown">
                    <download-dialog @closeDowmMessage="closeDowmMessage">
                    </download-dialog>
                </div>
                <div v-if="openFeedback">
                    <feedback-dialog @closeFeedback="openFeedback = false">
                    </feedback-dialog>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import downloadDialog from './home/DownLoadDialog/DownLoadDialog'
import feedbackDialog from './home/home_dialog/feedbackDialog.vue'
import { DownloadCenter } from "../../../../static/lib/downloader/DownloadCenter";
import { UpdateApp } from '../utils/UpdateApp';
import { VersionUpdater } from "../../../../static/lib/downloader/VersionUpdater";
import { SqlLib } from "../../../../static/lib/sqlite/SqlLib";
import { SqlLibUser } from "../../../../static/lib/sqlite/service/SqlLibUser";
import { UserResource } from "../../../../static/lib/sqlite/model/UserResource";
import topHeader from '../global/header/header'
import { mapState } from 'vuex';
import bus from '../assets/js/bus.js'
export default {
    name: 'grand',
    components: { downloadDialog, topHeader , feedbackDialog},
    data () {
        return {
            showTools: false,//显示工具栏
            showDown: false,
            // downloadSum: 0,
            isMax: false,
            openFeedback:false,
        }
    },
    mounted () {
        let _this = this;
        this.$nextTick(() => {
            window.addEventListener("changeDownloadStatus", function (event) {
                console.log("Main.vue  changeDownloadStatus event touch");
                if (event.detail && event.detail.lessonId) {
                    console.log("current downloading length is " + DownloadCenter.getInstance().downloadingTable.length);
                    // _this.changeDownloadSum(DownloadCenter.getInstance().downloadingTable.length);
                }
            });
            if (localStorage.getItem('tools')) {
                this.showDowmMessage()
            }
        })
        bus.$on('showFeedback',()=>{
            this.openFeedback = true
        })
    },
    beforeDestroy () {
        window.removeEventListener("changeDownloadStatus", function (event) {
            console.log("changeDownloadStatus event remove");
        });
    },
    computed: {
        ...mapState(['bookId', 'userId']),
        downloadSum () {
            return this.$store.state.loadingLessonSet.length
        }
    },
    methods: {
        closeMessagecenter () {
            this.$refs.header.messageCenterIsShow = false
        },
        close () {
            this.$dialog({
                confirm: '确认',
                cancel: '取消',
                message: '确认退出美丽科学吗？',
                close: false,
                type: "warn"
            }).then(() => {
                let versionUpdate = new VersionUpdater();
                if (versionUpdate.isRequireRefresh()) {//如果当前正在进行资源升级，要取消之前同步的所有DB数据
                    let sqlLib = SqlLib.getInstance(window.$DBDIR);
                    let user = SqlLibUser.queryCurrentUser(sqlLib);
                    let userResource = new UserResource();
                    userResource.userId = user.id;
                    sqlLib.deleteObjectByKey(userResource, "userId");
                }
                if (localStorage.isSilent) {
                    let params = JSON.parse(localStorage.isSilent)
                    console.log(params.exePath, params.exeParmsArr, params.message)
                    UpdateApp.update(params.exePath, params.exeParmsArr, params.message)
                }
                localStorage.removeItem('isOffline');
                this.$client.closeAllWindow();
            })
        },
        toMax () {
            this.isMax = !this.isMax;
            if (this.isMax) {
                this.$client.fullScreen();
            } else {
                this.$client.miniWindow();
            }
        },
        toMini () {
            this.$client.minimise();
        },
        mouseDown ($event) {
            const ipc = require('electron').ipcRenderer;

            if ($event.target instanceof HTMLInputElement
                || $event.target instanceof HTMLButtonElement
                || $event.target instanceof HTMLTextAreaElement
            ) {
                ipc.send('window-move-open', false);
                return;
            }
            ipc.send('window-move-open', true);
        },
        mouseUp () {
            const ipc = require('electron').ipcRenderer;
            ipc.send('window-move-open', false);
        },
        showDowmMessage () {
            this.$refs.toolsContainer.classList.toggle('expanded')
        },
        closeDowmMessage () {
            this.showDown = false;
        },
        // changeDownloadSum(val) {
        //     this.downloadSum = val;
        // },
        // addDownloadSum(val) {
        //     this.downloadSum = this.downloadSum + val;
        // }
    }
}
</script>

<style lang="scss">
/* CSS */
#grand {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        45deg,
        rgba(246, 252, 255, 1) 0%,
        rgba(247, 251, 255, 1) 100%
    );
    .grand-container {
        width: 100vw;
        flex: 1;
        background-color: #fff;
        position: relative;
        display: flex;
        .bg-img {
            width: 50.069vw;
            height: 28.778vh;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    }
    .main-content {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1024;
        border-color: transparent;
        .set-window {
            padding-top: 10px;
            line-height: 0;
            div:nth-child(2) {
                margin: 0 1.042vw;
            }
            img {
                width: 12px;
                height: 12px;
            }
        }
    }

    .nav-tools {
        position: absolute;
        bottom: 22px;
        right: 72px;
        z-index: 20;
        width: 64px;
        height: 64px;
        .download-tips {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            border-radius: 50%;
            background: linear-gradient(180deg, #ffffff 0%, #f3f9ff 100%);
            box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.29);
            transition: all 0.7s ease;
            z-index: 2;
            transform-style: preserve-3d;
            &:hover {
                // transform: rotateY(180deg);
            }
            // .nav-top {
            //     position: absolute;
            //     top: 0;
            //     bottom: 0;
            //     right: 0;
            //     left: 0;
            //     // background-color: #fff;
            //     border-radius: 50%;
            //     display: flex;
            //     justify-content: center;
            //     align-items: center;
            // }
            .nav-bottom {
                transform: rotateY(-180deg);
            }
            img {
                position: absolute;
                top: 0;
                bottom: 0;
                right: 0;
                left: 0;
                width: 30px;
                height: 32px;
                margin: auto;
                backface-visibility: hidden;
            }
        }
        .download-num {
            position: absolute;
            top: 0;
            right: 12px;
            bottom: 0px;
            margin: auto;
            display: inline-block;
            min-width: 16px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            font-size: 10px;
            color: #fff;
            border-radius: 8px;
            background-color: #f66c6c;
        }
        .sector {
            position: absolute;
            width: 140px;
            height: 0;
            overflow: hidden;
            background: #ffffff;
            box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.29);
            border-radius: 8px;
            left: 0;
            bottom: 32px;
            right: 0;
            margin: auto;
            transform: translateX(calc(-50% + 32px));
            display: grid;
            grid-template-rows: repeat(auto-fill, 24px);
            grid-auto-columns: 1fr;
            gap: 15px 0;
            transition: all 0.5s ease-in-out;
            .tools-item {
                color: #606266;
                height: 24px;
                cursor: pointer;
                padding-right: 10px;
                span {
                    font-size: 14px;
                    cursor: pointer;
                }
                .pop-img{
                    width: 20px;
                    height: 20px;
                    cursor: pointer;
                    margin-right: 8px;
                }
            }
        }
        .expanded {
            padding-top: 20px;
            height: 360px;
        }
        .interactive-item {
            text-align: center;
            font-size: 12px;
            padding: 0 7px;
            cursor: pointer;
            .pop-img {
                width: 28px;
                height: 28px;
                margin-bottom: 6px;
                cursor: pointer;
            }
            .pop-i-i-name {
                display: block;
                font-size: 14px;
                color: #606266;
                cursor: pointer;
            }
        }
    }
}
</style>
